import {useState} from "react";
import {Button, Table} from "antd";
import {
    getColumnsName,
    columnsSetting,
    columnsHeaderImg,
    getColumnsId,
    columnsBindTime,
    columnsMobile,
    priceInfo,
} from "@/components/Columns";
import useList from "@/hooks/useList";
import {adFindBindUser} from "@/api";
import User from "@/components/User";

export default function AdUser() {
    const [mobile, setMobile] = useState("");
    const [nickName, setNickName] = useState("");

    const {data} = useList({api: adFindBindUser, params: {nickName, mobile}}, [nickName, mobile]);

    const colunmsId = getColumnsId(data);

    const columns = [
        colunmsId,
        getColumnsName(),
        columnsHeaderImg,
        columnsBindTime,
        columnsMobile,
        ...priceInfo,
        {
            ...columnsSetting,
            render: () => (
                <div className="flr">
                    <Button type="primary" size="small">
                        查看详情
                    </Button>
                </div>
            ),
        },
    ];

    return (
        <div className="components-list">
            <User setMobile={setMobile} setNickName={setNickName} />
            <Table rowKey={row => JSON.stringify(row)} dataSource={data.list} columns={columns} />
        </div>
    );
}
